import { v4 as uuid } from 'uuid'
import tinymce from 'tinymce/tinymce'
import { checkBeforeInsert } from '@/utils/helpers'
import store from '@/store'
import { statementZh, statementBoth, statementTitleEn, statementTitleZh } from '@/constants/string'

tinymce.PluginManager.add('pageBreak', function (e) {
  e.ui.registry.addMenuButton('pageBreak', {
    icon: 'page-break',
    tooltip: '空白页',
    fetch: function (callback) {
      callback([
        {
          type: 'menuitem',
          text: '横向页面',
          onSetup,
          onAction: () => addBlankpage("landscape"),
        },
        {
          type: 'menuitem',
          text: '纵向页面',
          onSetup,
          onAction: () => addBlankpage("portrait"),
        }
      ])
    }
  })

  return {
    getMetadata: function () {
      return {
        name: '分页',
        url: 'http://sfrj.cn'
      }
    }
  }
})

function onSetup(e) {
  if (!checkBeforeInsert('pageBreak')) {
    e.setDisabled(true)
  }
}

function addBlankpage(layout = "portrait") {
  const en = store.getters.languageType === 'both'
  const standardBaseInfo = store.state.xmleditor.standardBaseInfo
  const pageId = uuid()
  const etsi = store.getters.filePropertyName === "ETSI"
  const str = `
      <img src="/assets/logo.png" class="company_logo" />
      <div class="file_no_version">
        <span class="file_no">${standardBaseInfo.standardNo||''}</span>版本：<span class="file_version">${standardBaseInfo.standardVersion||''}</span>
      </div>
      <div data-total="4" class="page-number"><br /></div>
      <div class="top-line"><br /></div>
    `
  const etsiStr = `<table border="1">
        <thead>
          <tr>
            <td colspan="2">
              <div>
                <img
                  class="company_logo"
                  src="/assets/logo.png"
                />
                <span>外场技术通知</span>
              </div>
            </td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td style="width: 50%">编号：</td>
            <td>版次：</td>
          </tr>
          <tr>
            <td>日期：</td>
            <td><div data-total="4" class="page-number"><br /></div></td>
          </tr>
          <tr>
            <td colspan="2">主题：</td>
          </tr>
        </tbody>
      </table>`
  const blankpage = tinymce.activeEditor.dom.createFragment(`
    <div
      contenteditable="false"
      class="page-sheet page-content"
      data-page-type="content"
      data-content-page-type="blank_page"
      data-page-id="${pageId}"
      data-layout="${layout}"
    >
      <div contenteditable="false" class="page_header noneditable irremovable ${en ? 'en' : 'zh'}">
        ${ etsi ? etsiStr : str}
      </div>
      <div class="page_body" contenteditable="true" data-type="blank_page" style="text-align: left" data-id="${uuid()}" data-block-id="${uuid()}">
        <p contenteditable="true" data-type="paragraph" data-id="${uuid()}" data-block-id="${uuid()}"><br data-mce-bogus="1" /></p>
      </div>
      <div contenteditable="false" class="page_footer noneditable irremovable">
        <p class="footer-title"><span class="stmt_tit_zh">${statementTitleZh}</span>${en ? '<span class="stmt_tit_en">' + statementTitleEn + '</span>' : ''}</p>
        <p class="footer-body"><span>${en ? statementBoth : statementZh}</span></p>
      </div>
    </div>
  `)
  const currentNode = tinymce.activeEditor.selection.getNode()
  const pagesheetNode = tinymce.activeEditor.dom.getParent(currentNode, '.page-sheet')
  tinymce.activeEditor.dom.insertAfter(blankpage, pagesheetNode)
  tinymce.activeEditor.fire('pageAdd')
}
